<template>
    <scroller class="body">
        <div>
            <text style="font-size: 40px">oninput: {{txtInput}}</text>
            <text style="font-size: 40px">onchange: {{txtChange}}</text>
            <text style="font-size: 40px">onreturntype: {{txtReturnType}}</text>
            <text style="font-size: 40px">selection: {{txtSelection}}</text>
        </div>
        <div>
            <div style="background-color: #286090">
                <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">用户名：</text>
            </div>
            <input 
            type="text" 
            placeholder="Input Text" 
            class="input" 
            v-model="username"
            :autofocus=true value="" 
            @change="onchange" 
            @input="oninput"/>
        </div>
        <div>
            <div style="background-color: #286090">
                <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">密码：</text>
            </div>
            <input 
            type="password" 
            placeholder="Input Password" 
            class="input" 
            v-model="password"
            @change="onchange" 
            @input="oninput"/>
        </div>
        <button type="primary" @click.native="login" value="登录"></button>
    </scroller>
</template>

<script>
    var modal = weex.requireModule('modal')
    var utils = require('../utils/utils.js');
    var api = require('../api/api.js');
  module.exports = {
    data: function () {
      return {
        username:'',
        password:'',
        txtInput: '',
        txtChange: '',
        txtReturnType: '',
        txtSelection:'',
        autofocus: false
      };
    },
    components: {
      button: require('../include/button.vue')
    },
    methods: {
      ready: function () {
        var self = this;
        setTimeout(function () {
          self.autofocus = true;
        }, 1000);
      },
      onchange: function (event) {
        this.txtChange = event.value;
        console.log('onchange', event.value);
      },
      onreturn: function (event) {
        this.txtReturnType = event.returnKeyType;
        console.log('onreturn', event.type);
      },
      oninput: function (event) {
        this.txtInput = event.value;
        console.log('oninput', event.value);
      },
      focus: function () {
        this.$refs['input1'].focus();
      },
      blur: function () {
        this.$refs['input1'].blur();
      },
      setRange: function() {
        console.log(this.$refs["inputselection"]);
        this.$refs["inputselection"].setSelectionRange(2, 6);
      },
      getSelectionRange: function() {
        console.log(this.$refs["inputselection"]);
        var self = this;
        this.$refs["inputselection"].getSelectionRange(function(e) {
          self.txtSelection = e.selectionStart +'-' + e.selectionEnd;
        });
      },
      login: function() {
        var self=this;
        console.log("login");
        var url="http://192.168.1.109:8080/bobby/home/login";
        api.doPostWithParams(url,{
            Name:self.username,
            Pass:self.password
        },function(data){
            utils.log('data: '+JSON.stringify(data));
            // self.modal.toast({message:'login'})
            if(!!data){
                if (!!data.desc && typeof data.desc == 'string') {
                    modal.toast({
                        message:data.desc,
                        duration:2
                    })
                }
                
            }else{
                    // this.nomore = true;
            }
        });
      }
    }
  };
</script>

<style scoped>
    .body {
        background-color: #ffffff;
    }
    .input {
        font-size: 60px;
        height: 80px;
        width: 750px;
        border-style: solid;
        border-width: 1px;
        border-color: #333;
    }
    .button {
        font-size: 36;
        width: 200;
        color: #41B883;
        text-align: center;
        padding-top: 10;
        padding-bottom: 10;
        border-width: 2;
        border-style: solid;
        margin-right: 20;
        border-color: rgb(162, 217, 192);
        background-color: rgba(162, 217, 192, 0.2);
    }
</style>